<template>
	<view style="min-height: 100vh;background: #F3F3F3;">
		<view class="wrap">
			<view class="codeInfo">
				<view class="codeInfoT">
					<image v-if="info.ShopPackage" :src="getImage(info.ShopPackage.title_image)"></image>
					<view class="codeInfoTR">
						<view class="codeInfoTRT">
							{{info.ShopPackage.name}}
						</view>
						<!-- <view class="codeInfoTRC">
							<text>标签</text>
						</view> -->
						<view class="codeInfoTRB">
							￥{{info.ShopPackage.money}}
						</view>
					</view>
				</view>
				<view class="codeInfoB" v-if="info.type==1">
					<view class="codeWrap">
						<image :src="codeimg"></image>
					</view>
					<view class="codeInfoBB">
						<view class="codeInfoBBL">
							<view>券码信息(1张可用)</view>
							<view>2022-01-01 23:59 到期</view>
						</view>
						<view class="codeInfoBBR" @click.stop="toRefund">
							申请退款
						</view>
					</view>
				</view>
			</view>
			<view class="storeWrap">
				<view class="storeT" v-if="nowGroupObj.shopObj">
					<view class="storeTT">
						<view class="storeTTL">{{nowGroupObj.shopObj.Shop.name}}</view>
						<image src="../../static/mine/phone.png" @click="callPhone"></image>
					</view>
					<view class="storeTB">
						<text>距您{{nowGroupObj.shopObj.distance}}km</text>
						<text>{{nowGroupObj.shopObj.Shop.detailed_address}}</text>
					</view>
				</view>
				<view class="storeB" @click="toBranchStore">
					<view>更多适用门店</view>
					<image src="../../static/mine/more.png"></image>
				</view>
			</view>
			<view class="explainBox">
				<view class="tcDetailTit">套餐详情</view>
				<view class="tcDetailB">
					<view class="tcDetailBItem" v-for="(item,index) in nowGroupObj.package_title" :key="index">
						<view class="tcDetailBItemT">
							{{item.name}}
						</view>
						<view class="tcDetailBItemB">
							<view v-for="(pitem,pindex) in item.conList">
								<view>{{pitem.name}}</view>
								<view>￥{{pitem.price}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="explainBox">
				<view class="tcDetailTit">温馨提示</view>
				<view class="tcDetailB">
					<view class="explainStr" style="font-size: 28upx;margin-bottom: 16upx;line-height: 36upx;">团单有效期：{{nowGroupObj.effective_time_str}}</view>
					<view class="explainStr" style="font-size: 28upx;margin-bottom: 16upx;line-height: 36upx;">使用时间：{{nowGroupObj.limit_time==0?"全天":(nowGroupObj.limit_time?nowGroupObj.limit_time.str:"--")}}</view>
					<view class="explainStr" style="font-size: 28upx;margin-bottom: 16upx;line-height: 36upx;">{{nowGroupObj.is_holidays==0?"节假日不可用":"节假日可用"}}</view>
					<view class="explainStr" style="font-size: 28upx;margin-bottom: 16upx;line-height: 36upx;">{{nowGroupObj.is_rest==0?"休息日不可用":"休息日可用"}}</view>
					<view class="explainStr" style="font-size: 28upx;margin-bottom: 16upx;line-height: 36upx;">{{nowGroupObj.is_appointment==0?"无需预约":"需要预约"}}</view>
					<view class="explainStr" style="font-size: 28upx;margin-bottom: 16upx;line-height: 36upx;">使用人数：{{nowGroupObj.use_num==0?"不限制":nowGroupObj.use_num+"人"}}</view>
					<view class="explainStr" style="font-size: 28upx;margin-bottom: 16upx;line-height: 36upx;">{{nowGroupObj.is_discount_share==0?"不与其他优惠同享":"与其他优惠同享"}}</view>
					<view class="explainStr" style="font-size: 28upx;margin-bottom: 16upx;line-height: 36upx;">备注：{{nowGroupObj.remind}}</view>
				</view>
			</view>
			<view class="orderInfos">
				<view class="orderTitle">订单信息</view>
				<view class="orderCon">
					<view class="orderConItem">
						<view class="orderConItemL">
							<text>订单号</text>:
						</view>
						<view class="orderConItemR">{{info.order_number}}</view>
					</view>
					<view class="orderConItem">
						<view class="orderConItemL">
							<text>手机号</text>:
						</view>
						<view class="orderConItemR">{{info.user.mobile}}</view>
					</view>
					<view class="orderConItem">
						<view class="orderConItemL">
							<text>下单时间</text>:
						</view>
						<view class="orderConItemR">{{info.pay_time_str}}</view>
					</view>
					<view class="orderConItem">
						<view class="orderConItemL">
							<text>数量</text>:
						</view>
						<view class="orderConItemR">{{info.num}}</view>
					</view>
					<view class="orderConItem">
						<view class="orderConItemL">
							<text>实付</text>:
						</view>
						<view class="orderConItemR">{{info.money}}</view>
					</view>
					<view class="orderConItem">
						<view class="orderConItemL">
							<text>原价</text>:
						</view>
						<view class="orderConItemR">{{nowGroupObj.oldMoney}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="orderBtn">
			<view class="orderBtnL" @click="callPhone">
				<image src="../../static/mine/phone.png"></image>
				<text>联系商家</text>
			</view>
			<view class="orderBtnR">
				<view class="orderBtnRL" v-if="info.type>1" @click="toRelease">体验反馈</view>
				<view class="orderBtnRR" v-if="info.type>1" @click="toShopDetail">再来一单</view>
				<view class="orderBtnRR" v-if="info.type==0" @click="getPay" :data-id="info.order_number">立即支付</view>
			</view>
		</view>
		<number-jpan :length="6" @closeChange="closeChange($event)" :showNum="false" ref="numberPad"></number-jpan>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	import {wxPayment,zfbPayment} from "@/utils/app.js";
	import numberJpan from "@/components/numberJpan/numberJpan.vue";
	export default {
		data() {
			return {
				id:"",
				nowGroupObj:{},
				info:{},
				codeimg:"",
				submitData:{}
			}
		},
		components:{'number-jpan':numberJpan},
		onLoad(options) {
      // #ifdef APP-PLUS
      var args = plus.runtime.arguments;
      if(args){
        app.$vm.setShareDetail(args);
      }
      // #endif
			this.id = options.id;
			this.getDetail();
			
		},
		methods: {
			toShopDetail(e){
				uni.navigateTo({
					url:"/pages/pagethree/pages/OfferDetails/OfferDetails?id="+this.info.shop_package_id
				})
			},
			toRelease(e){
				let orderConData = {};
				orderConData.shop = {};
				orderConData.shop.shop_id = this.info.Shop.id;
				orderConData.shop.name = this.info.Shop.name;
				orderConData.shop.id = this.info.Shop.id;
				orderConData.shop.industry = this.info.Shop.industry;
				orderConData.group = {};
				orderConData.group = {
					id:1,
					shop_id:this.info.Shop.id,
					shop_package_id:this.info.ShopPackage.id,
					Shop:this.info.Shop,
					ShopPackage:this.info.ShopPackage
				}
				uni.setStorageSync("orderConData",orderConData)
				uni.navigateTo({
					url:"/pages/pagefour/pages/Release/Release?from=order"
				})
			},
			closeChange(e){
				this.submitData.pay_password = e;
				this.submitPay();
			},
			getPay(e){
				let id = e.target.dataset.id || e.currentTarget.dataset.id;
				let arr = [];
				// #ifdef MP-WEIXIN
				arr = ["微信支付","余额支付"];
				// #endif
				// #ifdef APP
				arr = ["微信支付","余额支付","支付宝支付"];
				// #endif
				uni.showActionSheet({
					itemList:arr,
					success:result=>{
						let obj = {};
						obj.order_number = id;
						if(result.tapIndex==0){
							obj.pay_type = 10;
							// #ifdef APP
							obj.pay_type = 20;
							// #endif
							this.submitData = obj;
							this.submitPay();
						}else if(result.tapIndex==1){
							obj.pay_type = 40;
							this.submitData = obj;
							this.$refs.numberPad.open();
						}else if(result.tapIndex==2){
							obj.pay_type = 30;
							this.submitData = obj;
							this.submitPay();
						}
						
					}
				})
			},
			submitPay(){
				this.$u.api.shopPackageOrderPayOrder(this.submitData).then(res=>{
					console.log(res)
					if(this.submitData.pay_type==10||this.submitData.pay_type==20){
						wxPayment(JSON.parse(res.data.data.sign)).then(res=>{
							this.$refs.uToast.show({
								title:"支付成功",
								type:"success",
								duration:2000
							})
							this.page = 1;
							this.getList();
						});
					}else if(this.submitData.pay_type==30){
						
					}else if(this.submitData.pay_type==40){
						this.$refs.uToast.show({
							title:"支付成功",
							type:"success",
							duration:2000
						})
						this.page = 1;
						this.getList();
					}
				})
			},
			toRefund(e){
				uni.showModal({
					content:"确定要申请退款吗?",
					success:result=>{
						if(result.confirm){
							let obj = {};
							obj.order_number = this.nowGroupObj.order_number;
							this.$u.api.shopPackageOrderRefund(obj).then(res=>{
								console.log(res);
								this.$refs.uToast.show({
									title:"退款成功",
									type:"success",
									duration:2000
								})
								this.getDetail();
							})
						}
					}
				})
			},
			getQrCode(){
				let obj = {};
				// #ifdef MP-WEIXIN
				obj.type = 1;
				// #endif
				// #ifdef APP
				obj.type = 2;
				// #endif
				obj.data = {};
				obj.data.type = "hexiao";
				obj.data.id = this.info.order_number;
				obj.data.pid = this.info.shop_package_id;
				this.$u.api.qrcode(obj).then(res=>{
					console.log(res)
					this.codeimg = res.data.data.replace(/[\n\r]/g,'');
				})
			},
			toBranchStore(){
				let arr = this.nowGroupObj.ShopPackageRelation;
				uni.setStorageSync("groupStore",arr);
				uni.navigateTo({
					url:"/pages/pageone/pages/BranchStore/BranchStore"
				})
				// uni.navigateTo({
				// 	url:"/pages/pagefive/pages/storeList/storeList"
				// })
			},
			getImage(url){
				if(url&&(url.indexOf("http://")!=-1||url.indexOf("https://")!=-1)){
					return url;
				}else{
					return app.$vm.globalData.imgBaseUrl + url;
				}
			},
			callPhone(){
				if(!this.nowGroupObj.shopObj.Shop.mobile){
					this.$refs.uToast.show({
						title:"暂未设置",
						type:"error",
						duration:2000
					})
					return false;
				}
				uni.makePhoneCall({
					phoneNumber:this.nowGroupObj.shopObj.Shop.mobile.trim()
				})
			},
			getStore(){
				let obj = {};
				obj.shop_package_id = this.info.shop_package_id;
				let newObj = {};
				newObj.page = 1;
				newObj.limit = 10000;
				newObj.data = obj;
				this.$u.api.shopPackageRelationList(newObj).then(res=>{
					console.log(res)
					this.nowGroupObj.ShopPackageRelation = res.data.list.data.map(pcur=>{
						let dis = app.$vm.getDistance(Number(pcur.Shop.dimension),Number(pcur.Shop.longitude));
						pcur.distance = dis;
						return pcur;
					})
					console.log(this.nowGroupObj)
					let obj = {};
					for(let i=0;i<this.nowGroupObj.ShopPackageRelation.length;i++){
						if(i==0){
							obj = this.nowGroupObj.ShopPackageRelation[i];
						}else{
							if(this.nowGroupObj.ShopPackageRelation[i].distance<obj.distance){
								obj = this.nowGroupObj.ShopPackageRelation[i];
							}
						}
					}
					this.nowGroupObj.shopObj = obj;
					this.$forceUpdate();
				})
			},
			getDetail(){
				let obj = {};
				obj.id = this.id;
				this.$u.api.shopPackageOrderDetails(obj).then(res=>{
					console.log(res)
					this.info = res.data.details;
					this.getQrCode();
					this.info.pay_time_str = app.$vm.getTime(this.info.pay_time*1000,"-","time");
					this.nowGroupObj = res.data.details.ShopPackage;
					this.nowGroupObj.limit_time = JSON.parse(this.nowGroupObj.limit_time);

					if(this.nowGroupObj.is_specified_time==0){
						this.nowGroupObj.effective_time_str = this.nowGroupObj.effective_time/24/60/60 + "天内可用";
					}else{
						this.nowGroupObj.effective_time_str = app.$vm.getTime(this.nowGroupObj.effective_time*1000,"-","day") + "到期";
					}
					
					if(this.nowGroupObj.package_title){
						let arr = JSON.parse(this.nowGroupObj.package_title);
						let pArr = [];
						for(let i=0;i<arr.length;i++){
							let price = 0;
							if(arr[i].conList){
								for(let j=0;j<arr[i].conList.length;j++){
									price = price + Number(arr[i].conList[j].price);
								}
							}
							pArr.push(price);
						}
						let money = pArr.length>0?pArr[0]:0;
						for(let i=0;i<pArr.length;i++){
							if(money<pArr[i]){
								money = pArr[i];
							}
						}
						this.nowGroupObj.oldMoney = money;
						this.nowGroupObj.package_title = arr;
					}else{
						this.nowGroupObj.oldMoney = 0;
					}
					this.getStore();
				})
			}
		}
	}
</script>

<style scoped>
	.orderBtn{
		width: 100%;
		height: 120upx;
		box-sizing: border-box;
		padding: 0 24upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: white;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	.orderBtnL{
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 72upx;
		justify-content: center;
	}
	.orderBtnL>image{
		width: 32upx;
		height: 32upx;
		margin-bottom: 8upx;
	}
	.orderBtnL>text{
		font-size: 20upx;
		line-height: 20upx;
		color: #333333;
	}
	.orderBtnR{
		display: flex;
		align-items: center;
	}
	.orderBtnRL{
		width: 176upx;
		height: 72upx;
		line-height: 72upx;
		text-align: center;
		border-radius: 36upx;
		box-sizing: border-box;
		margin-right: 22upx;
		border: 2upx solid #FFAC3F;
		font-size: 24upx;
		color: #FFAC3F;
	}
	.orderBtnRR{
		width: 176upx;
		height: 72upx;
		line-height: 72upx;
		text-align: center;
		border-radius: 36upx;
		box-sizing: border-box;
		font-size: 24upx;
		color: white;
		background: #FFAC3F;
	}
	
	
	.orderInfos{
		width: 100%;
		border-radius: 8upx;
		margin-top: 16upx;
		background: white;
		padding: 24upx 24upx 32upx;
	}
	.orderTitle{
		font-size: 28upx;
		/* line-height: 28upx; */
		color: #333333;
		font-weight: bold;
		margin-bottom: 32upx;
	}
	.orderCon{
		
	}
	.orderConItem{
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 24upx;
		justify-content: space-between;
	}
	.orderConItem:last-child{
		margin-bottom: 0;
	}
	.orderConItemL{
		font-size: 24upx;
		line-height: 24upx;
		color: #999999;
		display: flex;
		align-items: center;
	}
	.orderConItemL>text{
		width: 100upx;
		font-size: 24upx;
		line-height: 24upx;
		color: #999999;
		text-align: justify;
		text-align-last: justify;
	}
	.orderConItemR{
		width: calc(100% - 120upx);
		font-size: 24upx;
		line-height: 24upx;
		color: #333333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	
	.explainStr{
		box-sizing: border-box;
		padding-left: 16upx;
		position: relative;
	}
	.explainStr::before{
		content: "";
		width: 8upx;
		height: 8upx;
		border-radius: 50%;
		background: #333333;
		position: absolute;
		left: 0;
		top: 14upx;
	}
	.explainBox{
		padding: 24upx 24upx 32upx;
		background-color: #fff;
		margin-top: 16upx;
		border-radius: 8upx;
	}
	.tcDetailTit{
		font-size: 28upx;
		line-height: 28upx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 30upx;
	}
	.tcDetailBItem{
		margin-bottom: 48upx;
	}
	.tcDetailBItem:last-child{
		margin-bottom: 0;
	}
	.tcDetailBItemT{
		font-size: 24upx;
		line-height: 24upx;
		color: #333333;
		font-weight: bold;
		margin-bottom: 24upx;
	}
	.tcDetailBItemB>view{
		margin-bottom: 24upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.tcDetailBItemB>view:last-child{
		margin-bottom: 0;
	}
	.tcDetailBItemB>view>view:nth-child(1){
		padding-left: 36upx;
		font-size: 20upx;
		line-height: 20upx;
		position: relative;
		color: #333333;
	}
	.tcDetailBItemB>view>view:nth-child(1)::before{
		content: "";
		width: 4upx;
		height: 4upx;
		border-radius: 50%;
		background: #333333;
		position: absolute;
		left: 16upx;
		top: 50%;
		transform: translateY(-50%);
	}
	.tcDetailBItemB>view>view:nth-child(2){
		font-size: 20upx;
		font-weight: bold;
		color: #333333;
	}
	
	
	
	.storeWrap{
		width: 100%;
		background: white;
		border-radius: 8upx;
		margin-top: 16upx;
		padding: 0 24upx;
	}
	.storeT{
		width: 100%;
		padding: 14upx 0 24upx;
		
	}
	.storeTT{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 48upx;
		margin-bottom: 32upx;
	}
	.storeTTL{
		font-size: 24upx;
		color: #333333;
		font-weight: bold;
		line-height: 48upx;
		width: calc(100% - 70upx);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.storeTT>image{
		width: 48upx;
		height: 48upx;
	}
	.storeTB{
		display: flex;
		align-items: center;
	}
	.storeTB>text{
		font-size: 20upx;
		line-height: 20upx;
		color: #999999;
	}
	.storeTB>text:nth-child(1){
		margin-right: 16upx;
	}
	.storeB{
		padding: 24upx 0;
		border-top: 2upx solid #F5F5F5;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.storeB>view{
		font-size: 24upx;
		line-height: 24upx;
		color: #333333;
		margin-right: 8upx;
	}
	.storeB>image{
		width: 24upx;
		height: 24upx;
	}
	
	
	.codeInfoB{
		width: 100%;
		box-sizing: border-box;
		padding: 24upx 0;
	}
	.codeWrap{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.codeWrap>image{
		width: 160upx;
		height: 160upx;
	}
	.codeInfoBB{
		margin-top: 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.codeInfoBBL{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 52upx;
	}
	.codeInfoBBL>view:nth-child(1){
		font-size: 24upx;
		line-height: 24upx;
		color: #333333;
	}
	.codeInfoBBL>view:nth-child(2){
		font-size: 16upx;
		line-height: 16upx;
		color: #333333;
	}
	.codeInfoBBR{
		width: 128upx;
		height: 52upx;
		line-height: 52upx;
		text-align: center;
		font-size: 20upx;
		background: #F7F7F7;
		border-radius: 26upx;
		color: #666666;
	}
	
	
	
	.codeInfo{
		border-radius: 8upx;
		background: white;
		width: 100%;
		box-sizing: border-box;
		position: relative;
		padding: 0 24upx;
	}
	.codeInfo::before{
		content: "";
		width: 22upx;
		height: 22upx;
		border-radius: 50%;
		background: #F3F3F3;
		position: absolute;
		top: 182upx;
		left: 0;
		transform: translateX(-50%);
	}
	.codeInfo::after{
		content: "";
		width: 22upx;
		height: 22upx;
		border-radius: 50%;
		background: #F3F3F3;
		position: absolute;
		top: 182upx;
		right: 0;
		transform: translateX(50%);
	}
	.codeInfoT{
		padding: 24upx 0;
		display: flex;
		border-bottom: 2upx dashed #FFE8CA;
		width: 100%;
	}
	.codeInfoT>image{
		width: 144upx;
		height: 144upx;
		border-radius: 8upx;
		margin-right: 16upx;
	}
	.codeInfoTR{
		width: calc(100% - 160upx);
		height: 144upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		/* padding: 4upx 0; */
	}
	.codeInfoTRT{
		font-size: 24upx;
		font-weight: bold;
		line-height: 40upx;
		color: #333333;
	}
	.codeInfoTRC{
		display: flex;
		align-items: center;
	}
	.codeInfoTRC>text{
		font-size: 16upx;
		line-height: 20upx;
		color: #666666;
	}
	.codeInfoTRB{
		font-size: 24upx;
		line-height: 40upx;
		color: #333333;
		font-weight: bold;
	}
	.wrap{
		padding: 16upx 24upx 136upx;
	}
</style>
